<template>
	<view class="wrap">
		<view class="main">
			<view class="b-column">
				<view class="s-num">已点{{cartCount}}份</view>
				<view class="s-action" @click="onClear">清空</view>
			</view>
			<view class="cart-list">
				<view class="cart-item" v-for="(item, index) in cartList" :key="index">
					<view class="b-cover" @click="onJumpGoodsDetail(item.goods_id)">
						<image :src="item.goods_cover" mode="aspectFill"></image>
					</view>
					<view class="b-main">
						<text class="b-title">{{item.goods_name}}</text>
						<view class="b-info">
							<view class="s-spec">{{item.goods_names}}</view>
						</view>
						<view class="b-amount">
							<view class="s-price">¥{{goodsPrice(item)}}</view>
							<view class="b-counter">
								<view class="iconfont icon-minus1" @click="onCounter(index, 'dec')"></view>
								<view class="s-num">{{item.goods_count}}</view>
								<view class="iconfont icon-plus1" @click="onCounter(index, 'inc')"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 加载中 -->
				<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
			</view>
			<view class="navbar">
				<view class="b-state">
					<view class="b-amount">
						<view class="s-tit">应付:</view>
						<view class="s-num">{{totalPrice}}元</view>
					</view>
				</view>
				<view class="b-action">
					<view class="s-exchange" @click="onPreviewOrder()">立即下单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCartList,
		handleCart,
		emptyCart
	} from '@/service/api/order.js'
	import mixinsAuth from '@/mixins/auth.js'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				cartList: [],
				checked: false,
				loadingType: 1,
				loadingText: ''
			}
		},
		onShow() {
			if (this.$store.getters.shopId) {
				this.loadCartList()
			}
		},
		onLoad(options) {
			if (!this.$store.getters.shopId) {
				if (this.$store.getters.accessToken) {
					uni.reLaunch({
						url: '/pages/shop/index'
					})
				}
			}
		},
		computed: {
			goodsPrice() {
				return (item) => {
					return (parseFloat(item.goods_price) * parseInt(item.goods_count)).toFixed(2)
				}
			},
			cartCount() {
				const cartList = this.cartList
				let cartCount = 0
				for (var i = 0; i < cartList.length; i++) {
					cartCount += parseInt(cartList[i].goods_count)
				}
				return cartCount
			},
			totalPrice() {
				const cartList = this.cartList
				let totalPrice = 0
				for (var i = 0; i < cartList.length; i++) {
					const item = cartList[i]
					totalPrice += parseFloat(item.goods_price) * parseInt(item.goods_count)
				}
				return totalPrice.toFixed(2)
			},
		},
		methods: {
			loadCartList() {
				console.log('loadCartList')
				this.loadingType = 1
				this.loadingText = ''
				getCartList().then(([err, res]) => {
					console.log('getCartList', err, res)
					this.loadingType = -1
					if (!err) {
						if (res.length > 0) {
							this.cartList = res
							this.$store.commit('setCartList', JSON.parse(JSON.stringify(this.cartList)))
						} else {
							this.loadingType = 2
							this.loadingText = '暂无商品数据'
						}
					} else {
						this.loadingType = 3
					}
				})
			},
			onClear() {
				this.cartList = []
				this.$store.commit('clearCartList')
				emptyCart().then(([err, res]) => {
					console.log('emptyCart', err, res)
				})
				this.loadingType = 2
				this.loadingText = '暂无商品数据'
			},
			onCounter(index, type) {
				const cartItem = this.cartList[index]
				if (type === 'dec' && cartItem.goods_count <= 0) {
					return
				}
				handleCart(cartItem.id, type === 'inc' ? 'increase' : 'decrease').then(([err, res]) => {
					console.log('handleCart', err, res)
					if (!err) {
						if (type === 'inc') {
							cartItem.goods_count++
						} else if (type === 'dec') {
							if (cartItem.goods_count == 1) {
								this.cartList.splice(index, 1)
							} else {
								cartItem.goods_count--
							}
						}
						this.$store.commit('cartItemCounter', {
							index,
							type
						})
					}
				})
			},
			onJumpGoodsDetail(goodsId) {
				console.log('onJumpGoodsDetail', goodsId)
			},
			onPreviewOrder() {
				const cartList = this.cartList
				let goodsData = []
				for (let i = 0; i < cartList.length; i++) {
					let cartItem = cartList[i]
					goodsData.push({
						cart_id: cartItem.id,
						goods_id: cartItem.goods_id,
						goods_name: cartItem.goods_name,
						goods_price: cartItem.goods_price,
						goods_data: cartItem.goods_data,
						goods_count: cartItem.goods_count
					})
				}
				uni.navigateTo({
					url: '/pages/order/preview?goods_data=' + JSON.stringify(goodsData)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {
		padding-bottom: 100upx;
	}

	.b-column {
		padding: 0 20upx;
		// position: fixed;
		// top: 100upx;
		// left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60upx;
		background: #eee;
		font-size: 26upx;
		color: #666;
	}

	.cart-list {
		.cart-item {
			padding: 30upx;
			background: #fff;
			display: flex;
			align-items: center;
			border-bottom: 1upx solid #eee;

			.b-cover {
				width: 140upx;
				height: 140upx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.b-main {
				flex: 1;
				height: 160upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 30upx;

				.b-title {
					font-size: 28upx;
					color: #666;
				}

				.b-amount {
					margin-top: 10upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.s-price {
						font-size: 32upx;
						color: #DA5650;
					}

					.b-counter {
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 44upx;
							color: #DA5650;
						}

						.s-num {
							width: 50upx;
							text-align: center;
							font-size: 30upx;
							color: #333;
						}
					}
				}

				.b-info {
					margin-top: 10upx;
					display: flex;
					align-items: center;

					.s-spec {
						margin-right: 20upx;
						font-size: 24upx;
						color: #666;
					}

					.s-attrs {
						margin-right: 20upx;
						display: flex;
						align-items: center;

						.s-item {
							margin-right: 10upx;
							font-size: 24upx;
							color: #666;
						}
					}

					.s-notes {
						display: flex;
						align-items: center;

						.s-item {
							margin-right: 10upx;
							font-size: 24upx;
							color: #666;
						}
					}
				}
			}
		}
	}

	.navbar {
		position: fixed;
		left: 0;
		// #ifdef MP-WEIXIN
		bottom: 0;
		// #endif
		// #ifdef H5
		bottom: 100upx;
		// #endif
		width: 100%;
		height: 100upx;
		background: #fff;
		border-top: 1upx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b-state {
			margin-left: 30upx;
			display: flex;
			align-items: center;


			.b-amount {
				margin-left: 30upx;
				display: flex;
				align-items: center;

				.s-tit {
					font-size: 28upx;
					color: #333;
				}

				.s-num {
					margin-left: 10upx;
					font-size: 32upx;
					color: #DA5650;
				}
			}
		}

		.b-action {
			display: flex;
			align-items: center;

			.s-exchange {
				background: #DA5650;
				height: 100upx;
				padding: 0 60upx;
				line-height: 100upx;
				font-size: 30upx;
				color: #fff;
				letter-spacing: 4upx;

				&.f-disable {
					background: rgba(218, 86, 80, 0.8)
				}
			}
		}
	}
</style>